<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="bw1" aaa="bw2" class="bw3" index="bw3"></div>
    <script>
        // 获取div的所有属性的值
        const divObj = document.querySelector("div");
        console.dir(divObj);
        console.log(divObj.id);//bw1
        console.log(divObj.aaa);//undefined


        // 获取aaa属性对应的值
        // 用attribute获取自定义的属性
        console.log(divObj.attributes[1]);//通过数组下标获取
        console.log(divObj.attributes.aaa);//通过.对应的属性获取

        // 获取aaa属性的属性名
        console.log(divObj.attributes.aaa.name);
        // 获取aaa属性的属性值
        console.log(divObj.attributes.aaa.value);

        //getAttribute()返回元素上一个指定的属性值。如果指定的属性不存在，则返回 null 或 "" （空字符串）；
        console.log(divObj.getAttribute("aaa"));//bw2
        console.log(divObj.getAttribute("aaa1"));//null
        console.log(divObj.getAttribute("id"));//bw1

        // 修改index的值
        // setAttribute()：设置指定元素上的某个属性值。如果属性已经存在，则更新该值；否则，使用指定的名称和值添加一个新的属性。
        console.log(divObj.getAttribute("index"));//bw3
        divObj.setAttribute("index", "111");
        console.log(divObj.getAttribute("index"));//111

        // 如果修改的属性不存在呢？当修改的属性不存在的时候，就相当于添加新属性。
        divObj.setAttribute("ccc", "222");
        console.log(divObj.getAttribute("ccc"));
        console.dir(divObj);


    </script>
</body>

</html>